{% extends 'base.html' %}
{% load static %}
{% load static %}
{% load user_tags %}

{% block title %}
    我的网站|注册
{% endblock %}

{% block nav_home_active %}active{% endblock %}

{% block content %}
    <div class="containter">
        <div class="row">
            <div class="col-xs-4 col-xs-offset-4">
                {% if not user.is_authenticated %}
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">注册</h3>
                    </div>
                    <div class="panel-body">
                        <form action="" method="POST">
                            {% csrf_token %}
                            {% for field in reg_form %}
                                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                            {% if field.id_for_label == 'id_email' %}
                            <div class="input-group">
                                {{ field }}
                                <span class="input-group-btn">
                                            <button id="send_code" class="btn btn-default">发送验证码</button>
                                        </span>
                            </div>
                            {% else %}
                            {{ field }}
                            {% endif %}
                                <p class="text-danger">{{ field.errors.as_text }}</p>
                            {% endfor %}
                            <span id="tip" class="text-danger">{{ reg_form.non_field_errors }}</span>
                            <!--清除浮动-->
                            <div class="clearfix"></div>
                            <a style="margin-top: 8px;display: inline-block;" href="{% get_login_qq_url %}">
                                <img src="{% static 'user/qq.png' %}">使用QQ账号登录</a>
                            <input type="submit" value="注册" class="btn btn-primary pull-right">
                        </form>
                    </div>
                </div>
                {% if request.GET.from %}
                <a style="text-align: center; display:block;" href="{% url 'login' %}?from=
                        {{  request.GET.from }}">前往登录 &gt;&gt;</a>
                {% else %}
                <a style="text-align: center; display:block;" href="{% url 'login' %}?from=
                    {{ request.get_full_path }}">前往登录 &gt;&gt;</a>
                {% endif %}
                {% else %}
                <span>已登录,跳转到首页...</span>
                <script type="text/javascript">
                    window.location.href = '/';
                </script>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block script_extends %}
<script type="text/javascript">
    $("#send_code").click(function () {
        var email = $("#id_email").val();
        if (email == '') {
            $('#tip').text("* 邮箱不能为空");
            return false;
        }
        // 发送验证码
        $.ajax({
            url: "{% url 'send_verification_code' %}",
            type: "GET",
            data: {
                'email': email,
                'send_for': 'register_code',
            },
            cache: false,
            success: function (data) {
                if (data['data'] == 'ERROR') {
                    alert(data['status']);
                }
            }
        });
        // 把按钮变灰
        $(this).addClass('disabled');
        $(this).attr('disabled', true);
        var time = 30;
        $(this).text(time + 's');
        var intervar = setInterval(() => {
            if (time <= 0) {
                clearInterval(intervar);
                $(this).removeClass('disabled');
                $(this).attr('disabled', false);
                $(this).text('发送验证码');
                return false;
            }
            time--;
            $(this).text(time + 's');
        }, 1000);
    });
</script>
{% endblock %}
